<template>
  <div class="task-conter-box">
    <el-badge :is-dot="batchNum > 0 || pageBatchNum > 0"
              class="item">
      <el-popover placement="bottom"
                  popper-class="popper-height"
                  width="400"
                  trigger="click"
                  @show="handlePopover">
        <!-- <el-card class="box-card"> -->
        <ul v-if="logList.length > 0">
          <li v-for="(item, index) in logList"
              :key="index"
              :class="isShowDetails(item)"
              class="list-item"
              @click="item.showDetails ? handleRouter(item) : null">
            <div class="li-title">
              <span>{{index + 1}}、</span>
              <!-- <a v-show="item.showDetails"
                 class="task-code">{{item.taskId}}</a> -->
              <span class="popper-tip">{{item.typeName}}</span>
              <span class="item-createAt">{{ item.createAt }}</span>
            </div>
            <div class="item-count">
              共{{item.totalNum}}笔，已成功
              <span class="success">{{item.successNum}}</span>笔
              <span v-if="item.failNum">，其中{{ item.failNum }}笔失败</span>
              <span v-if="item.unfinishedNum > 0">
                ，还剩<span class="unfinished">{{ item.unfinishedNum }}</span>笔正在处理中</span>。
            </div>
            <el-divider></el-divider>
          </li>
        </ul>
        <div v-else
             class="no-data">
          暂无数据
        </div>
        <!-- </el-card> -->
        <icon-svg slot="reference"
                  class="await-style"
                  class-name="iconClass"
                  icon-name="dingbudengdai" />
      </el-popover>
    </el-badge>
    <!-- 任务详情弹框 -->
    <BatchDetailsDialog v-model="visible"
                        :data="taskItem" />
  </div>
</template>
<script>
// import transition from "@/libs/transition.js";
import BatchDetailsDialog from "./BatchDetailsDialog"
import { tenant } from "@/api/index.js";
import { mapState } from "vuex";

export default {
  name: "BatchResult",
  components: { BatchDetailsDialog },
  data () {
    return {
      logList: [],
      taskItem: {},
      visible: false,
      flyShow: false,
      flyText: 0,
      pageBatchNum: null,
      navFly: false,
      m: null,
      receiveLoading: false
    };
  },
  computed: {
    ...mapState({
      batchNum: (state) => state.login.batchNum
    }),
    isShowDetails () {
      return item => item.showDetails ? 'active' : 'prohibit'
    }
  },
  mounted () {
  },
  methods: {
    handleRouter (item) {
      this.taskItem = item
      this.visible = true
    },
    async getLog () {
      let { data } = await tenant.task();
      this.logList = data.records;
      this.pageBatchNum = data.records.length;
    },
    handlePopover () {
      this.getLog()
    }
  },
};
</script>
<style>
.popper-height {
  max-height: 400px !important;
  overflow: auto !important;
}
.el-divider--horizontal {
  margin: 15px 0;
}
</style>
<style lang="scss" scoped>
.task-conter-box {
  position: relative;
  margin: 0 30px;
  cursor: pointer;
}
.popper-tip {
  font-size: 14px;
  font-weight: 700;
  padding-right: 7px;
}

.task-conter-box {
  .list-item {
    padding-bottom: 12px;
  }
}

.prohibit {
  cursor: not-allowed !important;
}
.active {
  cursor: pointer !important;
}

.task-code {
  padding-right: 7px;
}
.item-count {
  padding-left: 22px;
  color: #848484;
  .success {
    color: #25ba2a;
  }
  .unfinished {
    color: #ff0000;
  }
}
.item-createAt {
  color: #999;
}
.li-title {
  padding-bottom: 5px;
}
.no-data {
  text-align: center;
  display: block;
  padding: 10px;
}
</style>
